<template>
  <div class="about">
    {{$store.state.king}}
    <div v-text="textMsg" ></div>
    <div v-html="textMsg" v-on:click="changeMsg1"></div>

    <h1>正常：{{msg}}</h1>
    <p>--------------------------</p>
    <h1>逆转：{{ReMsg()}}</h1>
    <h1>计算：{{ReMsgComputed}}</h1>
    <p>--------------------------</p>


    <!-- <h1>逆转：{{ReMsg()}}</h1>
    <h1>计算：{{ReMsgComputed}}</h1>
    <p>--------------------------</p>
    <h1>逆转：{{ReMsg()}}</h1>
    <h1>计算：{{ReMsgComputed}}</h1>
    <p>--------------------------</p>
    <h1>逆转：{{ReMsg()}}</h1>
    <h1>计算：{{ReMsgComputed}}</h1>
    <p>--------------------------</p> -->
  </div>
</template>
<script>
  export default {
    name: 'AboutView',
    data() {
      return {
        count:1,
        msg: "This is an about page",
        msg1: "This is an about page",
        textMsg:"<h1>hello text</h1>",
        king: 1
      };
    },
    methods: {
      changeMsg1(){
        this.$store.state.king = "king 111111";
        //debugger;
      },
      ReMsg(){
        //this.count = this.count+1;
        //debugger;
        console.log("remsg 方法被调用了")
        return this.msg.split('').reverse().join('')
      }
    },
    computed:{
      ReMsgComputed(){
        console.log("ReMsgComputed 计算属性被调用了")
        return this.msg.split('').reverse().join('')
      }
    },
    beforeCreate(){
      //debugger;
      console.log("beforeCreate1",this.msg)
    },
    created(){
      //debugger;
      console.log("created2",this.msg)
    },
    beforeMount(){
      //debugger;
      console.log("beforeMount3",this.msg)
    },
    mounted (){
      //debugger;
      console.log("mounted4",this.$store.state.king)
      this.king = this.$store.state.king;
    },
    beforeUpdate (){
      //debugger;
      console.log("beforeUpdate 5",this.msg1)
    },
    updated  (){
      //debugger;
      console.log("updated 6",this.msg1)
      //this.changeMsg1()
    },
    beforeDestroy (){
      console.log("beforeDestroy 7",this.msg1)
    },
    destroyed (){
      console.log("destroyed 8",this.msg1)
    },
  }
</script>
  
